<template>
  <div>
    <div class="item_container">
      <el-row class="item">
        <el-row class="title" style="font-size: 19px">帐号与密码</el-row>
        <el-row class="describe">个性头像/帐号设置</el-row>
      </el-row>
      <el-row class="item">
        <el-row class="title">个性头像</el-row>
        <el-row class="describe">
          未绑定头像，系统将默认用账号开头字母头像或者昵称文字头像
        </el-row>
        <el-row>
          <QiniuUpload
            :imageUrl.sync="form.imageUrl"
            @upLoadSuccess="upLoadSuccess"
          ></QiniuUpload>
        </el-row>
      </el-row>
      <el-row class="item">
        <el-row class="title">帐号设置</el-row>
        <el-row class="describe"
          >绑定手机和邮箱，并设置密码，帐号更安全
          注意：为保证帐号安全，需进行二次验证。
        </el-row>
      </el-row>
       <el-row class="item form">
        <el-col>
          <el-col :span="6" class="label">昵称</el-col>
          <el-col :span="16" v-if="!isCheck">{{user.nickName||'未设置'}}</el-col>
          <el-col :span="16" v-else>
            <el-input v-model="form.nickName"></el-input>
          </el-col>
        </el-col>
        <el-col :span="2">
          <el-button v-if="!isCheck" type="text" @click="loginCheck"
            >编辑</el-button
          >
          <el-button
            v-else
            type="primary"
            size="small"
            @click="updateUser('nickName', form.nickName)"
            >确认修改</el-button
          >
        </el-col>
      </el-row>
      <el-row class="item form">
        <el-col>
          <el-col :span="6" class="label">密码</el-col>
          <el-col :span="16" v-if="!isCheck">已设置</el-col>
          <el-col :span="16" v-else>
            <el-input v-model="form.password"></el-input>
          </el-col>
        </el-col>
        <el-col :span="2">
          <el-button v-if="!isCheck" type="text" @click="loginCheck"
            >编辑</el-button
          >
          <el-button
            v-else
            type="primary"
            size="small"
            @click="updateUser('password', form.password)"
            >确认修改</el-button
          >
        </el-col>
      </el-row>
      <el-row class="item form">
        <el-col>
          <el-col :span="6" class="label">绑定手机</el-col>
          <el-col :span="16" v-if="!isCheck">{{ user.phone }}</el-col>
          <el-col :span="16" v-else>
            <el-input v-model="form.phone"></el-input>
          </el-col>
        </el-col>
        <el-col :span="2">
          <el-button v-if="!isCheck" type="text" @click="loginCheck"
            >编辑</el-button
          >
          <el-button
            v-else
            type="primary"
            size="small"
            @click="updateUser('phone', form.phone)"
            >确认修改</el-button
          >
        </el-col>
      </el-row>
      <el-row class="item form">
        <el-col>
          <el-col :span="6" class="label">绑定邮箱</el-col>
          <el-col :span="16" v-if="!isCheck">{{ user.email }}</el-col>
          <el-col :span="16" v-else>
            <el-input v-model="form.email"></el-input>
          </el-col>
        </el-col>
        <el-col :span="2">
          <el-button v-if="!isCheck" type="text" @click="loginCheck"
            >编辑</el-button
          >
          <el-button
            v-else
            type="primary"
            size="small"
            @click="updateUser('email', form.email)"
            >确认修改</el-button
          >
        </el-col>
      </el-row>
    </div>
    <LoginDialog
      @checkSuccess="isCheck = true"
      :dialogVisible.sync="loginDialogVisible"
    ></LoginDialog>
  </div>
</template>

<script>
import { getUser } from "@/api/user";
import { getToken, setToken } from "../../../utils/auth";
import QiniuUpload from "../../../components/Qiniu-Upload";
import LoginDialog from "./LoginDialog";
import { updateUser } from "../../../api/user";
import { checkStatus } from "../../../utils/utils";

export default {
  name: "userConfig",
  components: { LoginDialog, QiniuUpload },
  data() {
    return {
      user: {},
      form: {},
      loginDialogVisible: false,
      isCheck: false,
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    // 根据id获取用户

    async getUser() {
      this.user = this.form = await getUser();
    },
    upLoadSuccess(value) {
      this.updateUser("imageUrl", value);
    },
    loginCheck() {
      this.loginDialogVisible = true;
    },
    async updateUser(filed, value) {
      const res = await updateUser({
        id: getToken().id,
        [filed]: value,
      });
      if (!checkStatus(res)) return;
      console.log({
        ...getToken(),
        [filed]: value,
      });
      setToken({
        ...getToken(),
        [filed]: value,
      });
    },
  },
};
</script>

<style scoped lang="less">
.item_container {
  .item {
    margin: 5px 0;
    line-height: 35px;
    font-size: 14px;
    color: #8590a6;
  }

  .item + .item {
    border-top: 1px solid #f1f1f1;
  }

  .title {
    color: black;
    font-weight: 600;
    font-size: 15px;
  }

  .form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-col:nth-child(3) {
      text-align: right;
    }
  }
}
</style>
